<template>
	<view class="swiper-page">
		<swiper class="swiper" :vertical="verticalSelect" :indicator-dots="dotsSelect" :autoplay="autoplaySelect"
		          :rebound="reboundSelect" :interval="intervalSelect" :circular="circularSelect"
		          :indicator-color="indicatorColor" :indicator-active-color="indicatorColorActive"
		          :disable-touch="disableTouchSelect" :current="currentVal" 
		          @change="swiperChange" @transition="swiperTransition" @animationfinish="swiperAnimationfinish">
		          <swiper-item v-for="(item, i) in banner" :key="i" @click="() =>jumpPage(item)">
		            <view class="custom-swiper-item">
						<image width="100%" height="100%" fit="cover" :src="item.image" />
					</view>
		          </swiper-item>
				 <!-- <swiper-item v-for="(item, i) in banner" :key="i">
				    <view class="custom-swiper-item">
						<image width="100%" height="100%" fit="cover" src="https://cdn.pixabay.com/photo/2019/12/27/01/48/samsung-4721546_1280.jpg" />
					</view>
				  </swiper-item>
		          <swiper-item>
		            <view class="custom-swiper-item">
						<image width="100%" height="100%" fit="cover" src="https://cdn.pixabay.com/photo/2019/12/27/01/47/samsung-4721544_1280.jpg" />
					</view>
		          </swiper-item>
		          <swiper-item>
		            <view class="custom-swiper-item">
						<image width="100%" height="100%" fit="cover" src="https://cdn.pixabay.com/photo/2017/07/28/05/12/i-phone-2547677_1280.jpg" />
					</view>
		          </swiper-item> -->
		        </swiper>
	</view>
</template>

<script lang="ts" setup>
	import {ref} from 'vue';
	const verticalSelect = ref(false);
	const dotsSelect = ref(true)
	const autoplaySelect = ref(true)
	const reboundSelect = ref(true)
	const intervalSelect = ref(6000)
	const circularSelect = ref(false)
	const indicatorColor = ref("#e7e7e7")
	const indicatorColorActive = ref("#2bc888")
	const disableTouchSelect = ref(true)
	const currentVal = ref(0)
	// const currentItemIdVal = ref()
	const swiperChange = () =>{}
	const swiperTransition = () => {}
	const swiperAnimationfinish = () => {}
	
	defineProps({
		banner:{
			type: Array<{image: string, isShow: boolean, skipAddress: string, url: string}>,
			requed: true
		}
	})
	
	const jumpPage = (item) => {
		const { type } = item
		if(Number(type) === 3){
			uni.navigateTo({
				url:"/pagesC/share/index"
			})
		}
		if(Number(type) === 1){
			uni.navigateTo({
				url:"/pagesB/memberCenter/index"
			})
		}
		if(Number(type) === 0){ // 跳转到h5页面
			return
		}
		if(Number(type) === 5){ // 跳转到商城主页面
			return
		}
		if(Number(type) === 6){
			return
		}
	}
</script>

<style lang="scss" scoped>
	.swiper-page{
		// width: 100%;
		padding: 17upx;
		margin: 20upx 0;
		height: 160upx;
		background-color: #fff;
		border-radius: 15upx;
		.swiper {
		    height: 160upx;
		  }
		  .custom-swiper-item {
		    width: 100%;
		    height: 160upx;
		  }
	}
</style>